<template>
  <div>
    <div class="top-search">
      <el-input
        placeholder="请输入用户名"
        style="flex: 4"
        v-model="input"
        clearable>
      </el-input>
      <el-button type="primary" style="flex: 0.3;margin-left: 1vw">预测</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 70%;margin-left: 15%;margin-top: 3vh">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="题目"
        width="250">
        <template slot-scope="scope">
          <div @click="detailData(scope.row)" style="color: #5E1C7A">{{scope.row.title}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="user"
        label="用户"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="180">
      </el-table-column>
      <el-table-column
        prop="forecast"
        label="预测通过概率"
        width="auto">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "recommend-page",
    data(){
      return{
        input: '',
        tableData: [{
          id: '1',
          title: 'The A+B Problem',
          user:'admin',
          lang:'cpp',
          status:0,
          forecast:0.8888
        },
          {
            id: '2',
            title: 'The A+B Problem',
            user:'admin',
            lang:'cpp',
            status:1,
            forecast: 0.8888
          },
          {
            id: '3',
            title: 'The A+B Problem',
            user:'admin',
            lang:'cpp',
            status:2,
            forecast:0.8888
          },
          {
            id: '4',
            title: 'The A+B Problem',
            user:'admin',
            lang:'cpp',
            status:3,
            forecast:0.8888
          },
          {
            id: '5',
            title: 'The A+B Problem',
            user:'admin',
            lang:'cpp',
            status:3,
            forecast: 0.8888
          },
          {
            id: '6',
            title: 'The A+B Problem',
            user:'admin',
            lang:'cpp',
            status:3,
            forecast: 0.8888
          }]
      }
    }
  }
</script>

<style scoped>
  .top-search{
    display: flex;
    width: 60%;
    justify-content: center;
    align-items: center;
    margin-left: 20%;
    margin-top: 5vh;
  }
</style>
